<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts饼图示例</title>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px; height: 400px"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main"));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{b}: {c}%",
                },
                series: [
                    {
                        name: "访问来源",
                        type: "pie",
                        radius: ["50%", "70%"],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 0,
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        label: {
                            show: true,
                            position: "outside",
                            formatter: "{b}\n{c}%",
                        },
                        labelLine: {
                            show: true,
                        },
                        data: [
                            {
                                value: 20,
                                name: "消息",
                                itemStyle: { color: "#67C23A" },
                            },
                            {
                                value: 0,
                                name: "朋友圈",
                                itemStyle: { color: "#95D475" },
                            },
                            {
                                value: 4,
                                name: "聊天会话",
                                itemStyle: { color: "#B3E19D" },
                            },
                            {
                                value: 46,
                                name: "文章",
                                itemStyle: { color: "#409EFF" },
                            },
                            {
                                value: 4,
                                name: "推荐",
                                itemStyle: { color: "#79BBFF" },
                            },
                            {
                                value: 22,
                                name: "搜一搜",
                                itemStyle: { color: "#A0CFFF" },
                            },
                            {
                                value: 0,
                                name: "朋友在看",
                                itemStyle: { color: "#E6A23C" },
                            },
                            {
                                value: 2,
                                name: "其他",
                                itemStyle: { color: "#F0C78A" },
                            },
                        ],
                    },
                ],
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
</html>
